<template>
  <div>
    <el-button type="primary" @click="goNoticeAdd">添加通知</el-button>
    <el-input v-model="pagination.queryContent" placeholder="请输入标题"
              style="width: 130px;margin-left: 600px;margin-bottom: 20px">

    </el-input>
    <el-button type="primary" style="margin-left: 10px" @click="findPage">查询</el-button>
    <el-table
        v-loading="loading"
        :data="noticeList"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="title"
          align="center"
          label="标题"
      >
      </el-table-column>
      <el-table-column
          label="创建人"
          align="center"
      >
        <template slot-scope="scope">
          <span v-html="scope.row.user.realName"></span>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          align="center"
      >
        <template slot-scope="scope">
          <el-button @click="showNoticeContent(scope.row.content)" type="text" size="small">查看</el-button>
          <el-button type="text" @click="deleteById(scope.row.id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding-top: 20px">
      <el-pagination
          background
          :total="total"
          @current-change="handleSelectionChange"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          layout="prev, pager, next"
      >
      </el-pagination>
    </div>

    <el-dialog
        title="通知内容"
        :visible.sync="centerDialogVisible"
        width="50%"
        fullscreen
        center>
      <span v-html="content"></span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="centerDialogVisible = false">关 闭</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "NoticeList",
  data() {
    return {
      loading: false,
      noticeList: [],
      total: 0,
      pagination: {
        currentPage: 1,
        pageSize: 5,
        queryContent: ""
      },
      content: "",
      centerDialogVisible: false
    }
  },
  methods: {
    deleteById(id){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.delete("/notice/deleteById?id="+id).then(resp=>{
          if (resp.data.statusCode == 200) {
            this.$message({
              type: 'success',
              message: resp.data.message
            });
            this.findPage();
          }
        })
      })
    },
    showNoticeContent(content) {
      this.centerDialogVisible = true;
      this.content = content;
    },
    goNoticeAdd() {
      this.$router.replace("/system/noticeAdd");
    },
    findPage() {
      this.loading = true;
      this.axios.post("/notice/findPage", this.pagination).then(resp => {
        if (resp.data.statusCode == 200) {
          this.total = resp.data.data.total;
          this.noticeList = resp.data.data.data;
        }
        this.loading = false;
      })
    },
    handleSelectionChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage();
    },
  },
  mounted() {
    this.findPage();
  }
}
</script>

<style scoped>

</style>
